<template>
  <div id="app">
    <!--头部-->
    <tabbar @getoffsetLeft = "getoffsetLeft" @showSearch = "showSearch"/>
    <!--主体区域-->
    <main-com/>
    <!--底部播放栏-->
    <play-music/>
    <!--搜索相关热搜等-->
    <searchCom v-if="searchFlag"  />
  </div>
</template>
<script>
import tabbar from './components/content/tabbar/Tabbar'
import mainCom from './components/content/main/Main'
import playMusic from './components/common/playMusic/playMusic'
import searchCom from './components/common/search/searchCom'
export default {
  name:'App',
  data() {
    return {
      searchFlag:false,
      inputEl:null,
    }
  },  
  methods: {
    getoffsetLeft(el,left){
      this.inputEl = el
      el.focus()
    },
    showSearch(flag){
        this.searchFlag = flag
    },
  },
  created() {
    
  },
  mounted() {
    
  },
  components:{
    tabbar,
    mainCom,
    playMusic,
    searchCom
  }
}
</script>
<style lang="less" scoped>
@import url('./assets/css/reset.css');
@import url('./assets/css/base.css');
</style>
